<template>
	<view class="device">
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
				<view class="device-item acea-row row-between-wrapper" @tap="details(item)">
					<view class="acea-row row-middle">
						<view class="pictrue">
							<image class="imgwh" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/device-pic.png" mode=""></image>
						</view>
						<view class="ml20">
							<view class="mark">{{ item.mark }}</view>
							<view class="deviceName mt10">{{ item.deviceName }}</view>
						</view>
					</view>
					<view class="detail">查看详情</view>
				</view>
			</block>
		</view>
		
		<view class="kong" v-if="list.length==0">
			<view class="acea-row row-middle row-center row-column none-t">
				<text class="fs-40 color666">暂无设备呢~</text>
				<text class="color666 fs-32">点击下方添加</text>
			</view>
		</view>
		<view style="width: 100%;height: 150rpx;"></view>
		<view class="back-btn acea-row row-center row-middle" @click="open">
			<text class="iconfont icon-add"></text>
			<text class="ml10">添加设备</text>
		</view>
		
		<uni-popup type="center" ref="popup">
			<view class="" @click="close">
				<image class="decive-img" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/decive-img.png" mode="aspectFit"></image>
			</view>
		</uni-popup>
		<suspension></suspension>
	</view>
</template>

<script>
	import {
		deviceList
	} from '@/api/admin.js'
	import suspension from '@/components/suspension.vue';
	export default {
		components:{
			suspension
		},
		data() {
			return {
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`), 
			};
		},
		onLoad() {

		},
		onShow() {
			this.page = 1;
			this.loadend = false;
			this.loading = false;
			this.list = [];
			this.getlist();
		},
		methods:{
			details(item){
				uni.navigateTo({
					url: `/pages/other/device-detail?imei=${item.imei}`
				})
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				uni.showLoading({
					title : '加载中'
				})
				deviceList({ page:that.page,limit:that.limit }).then(res=>{
					uni.hideLoading();
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					uni.hideLoading();
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			open(){
				uni.navigateTo({
					url:'/pages/other/add-device'
				})
				// this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.device{
		
		.list{
			padding: 30rpx;
			
			.device-item{
				width: 100%;
				padding: 30rpx;
				border-radius: 40rpx;
				background-color: #ffffff;
				margin-bottom: 30rpx;
				
				.pictrue{
					width: 116rpx;
					height: 116rpx;
				}
				
				.detail{
					width: 180rpx;
					height: 70rpx;
					border-radius: 35rpx;
					background: rgba(253, 130, 62, 0.2);
					text-align: center;	
					line-height: 70rpx;
					color: #FD823E;
					font-size: 26rpx;
				}
				
				.deviceName{
					width: 300rpx;
					color: #9B9B9B;
					font-size: 24rpx;
				}
				.mark{
					font-size: 32rpx;
					color: #333333;
				}
				
			}
		}
		
		
		.decive-img{
			width: 660rpx;
			height: 700rpx;
		}
		
		.kong{
			width: 630rpx;
			height: 608rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/device-none.png');
			background-size: 100% 100%;
			margin: 30rpx auto;
			position: relative;
			
			.none-t{
				width: 100%;
				color: #888888;
				font-size: 34rpx;
				position: absolute;
				bottom: -100rpx;
				left: 0;
				right: 0;
			}
		}
		.back-btn{
			width: 532rpx;
			height: 104rpx;
			// margin: 150rpx auto;
			background: rgba(253, 125, 54, 0.2);
			border-radius: 52rpx;
			color: #FD7D36;
			font-size: 32rpx;
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			margin: 0 auto;
			
			.icon-add{
				color: #FD7D36;
				font-size: 32rpx;
			}
		}
		
	}
</style>
